<template>
  <div v-loading="loading" class="container pageSetting_container">
    <el-tabs type="border-card">
      <div class="setting">
        <div ref="scrollRef2" class="tableData2 changeStyleSearch">
          <!-- <div class="tableRow">
            <div class="table-left">
              <div class="name">是否启用</div>
              <div class="switch_box">
                <el-switch
                  v-model="cancelFlag"
                  active-color="#13ce66"
                  inactive-color="#999999"
                  @change="flagChange"
                />
              </div>
            </div>
          </div> -->
          <div v-for="(item, index) in newData2" :key="index" class="tableRow">
            <div class="table-left">
              <!-- <div class="switch">
                  <el-switch
                    v-model="item.isShow"
                    active-color="#13ce66"
                    inactive-color="#999999"
                  />
                </div> -->
              <div class="name">{{ item.label }}</div>
              <div class="num">
                <div v-if="item.type=='switch'" class="switch_box">
                  <el-switch
                    v-model="cancelFlag"
                    active-color="#13ce66"
                    inactive-color="#999999"
                    @change="flagChange"
                  />
                </div>
                <el-select v-if="item.type== 'select'" v-model="item.defaultValue" placeholder="请选择">
                  <el-option
                    v-for="itemChild in item.options"
                    :key="itemChild.value"
                    :label="itemChild.label"
                    :value="itemChild.value"
                  />
                </el-select>
                <el-select v-if="item.type== 'pushCycle'" v-model="item.defaultValue" placeholder="请选择">
                  <el-option
                    v-for="itemChild in item.options"
                    :key="itemChild.value"
                    :label="itemChild.label"
                    :value="itemChild.value"
                  />
                </el-select>
                <el-select v-if="item.type== 'time-select'" v-model="item.defaultValue" clearable placeholder="请选择">
                  <el-option
                    v-for="itemChild in item.options"
                    :key="itemChild.value"
                    :label="itemChild.label"
                    :value="itemChild.value"
                  />
                </el-select>
                <el-select v-if="item.type== 'dict'" v-model="item.defaultValue" placeholder="请选择">
                  <el-option
                    v-for="itemChild in item.options"
                    :key="itemChild.dictCode"
                    :label="itemChild.dictLabel"
                    :value="itemChild.dictCode"
                  />
                </el-select>
                <!--                  <el-select v-if="item.type=== 'select-multiple'" v-model="item.defaultValue" multiple collapse-tags filterable>-->
                <!--                    <el-option-->
                <!--                      v-for="itemChild in item.options"-->
                <!--                      :key="itemChild.value"-->
                <!--                      :label="itemChild.label"-->
                <!--                      :value="itemChild.value"-->
                <!--                    />-->
                <!--                  </el-select>-->

                <!--   自定义多选组件    -->
                <JLINKSelectMultiple
                  v-if="item.type=== 'select-multiple'"
                  v-model="item.defaultValue"
                  :select-options="item.options"
                  placeholder="全部"
                />
                <JLINKSelectMultiple
                  v-if="item.type=== 'pushUser-select'"
                  v-model="item.defaultValue"
                  :select-options="item.options"
                  placeholder="全部"
                />

                <el-input v-else-if="item.type=='input'" v-model="item.defaultValue" placeholder="请输入" />
                <TimeRangeSearch v-if="item.type==='time'" style="width:180px;background:white;border-radius:5px;" :band-value.sync="item.defaultValue" />
                <!-- <el-date-picker
                    v-else-if="item.type=='time'"
                    v-model="item.defaultValue"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH时"
                    value-format="yyyy-MM-dd HH:mm"
                    placeholder="请选择"
                  /> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-tabs>
    <div class="bottomBtn">
      <div class="left-button" />
      <div class="right-button">
        <el-button type="cancel" @click.stop="cancel">取消</el-button>
        <el-button @click.stop="onSubmit">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  selectUserByDeptId
} from '@/api/system/dept'
import { mapGetters } from 'vuex'
import { getPagePushSettings } from '@/api/common/common'
import { savePagePushSettings, backDefault, pushFlagChange } from '@/api/common/common'
export default {
  computed: {
    ...mapGetters([
      'companyName'
    ])
  },
  props: {
    layerid: {},
    settingData: {}
  },
  data() {
    return {
      typeLabel: '推送配置',
      TableColumns: [],
      PushColumns: [],
      defaultSearchColumns: [],
      pageDatas: {
        orderByColumn: '',
        isAsc: '',
        pageSize: ''
      },
      cancelFlag: true,
      loading: true,
      moduleId: '', // 推送单据id
      powerJobTaskId: '', // 后端使用
      optionData: [],
      pushUserList: [],
      settingDatas: {},
      newData: [],
      newData2: [],
      showColumn: true,
      pageNoCreateTimeUpdateTime: ['saleReport', 'purchaseStatistics', 'warehouseReport']
    }
  },
  created() {
    // 获取推送人
    this.getPushUserList()
    console.log(this.companyName)
  },
  mounted() {
    // if (this.$route.path.indexOf('equipmentReport/') > 0) {
    //   this.showColumn = false
    //   this.activeName = 'searchField'
    // }
  },
  methods: {
    // 推送开关
    flagChange() {
      this.loading = true
      pushFlagChange({ cancelFlag: this.cancelFlag, powerJobTaskId: this.powerJobTaskId, id: this.moduleId }).then(res => {

      }).finally(() => {
        this.loading = false
      })
    },
    clearOption(row) {
      row.defaultValue = undefined
    },
    // 获取推送人员
    getPushUserList() {
      selectUserByDeptId(this.pageData2).then(res => {
        this.pushUserList = res.data.map((item) => {
          const Object = {
            value: item.userId,
            label: item.realName
          }
          return Object
        })
        this.getPagePushSettings()
        console.log(this.pushUserList)
      })
    },
    // 推送配置
    getPagePushSettings() {
      console.log('推送配置')
      console.log(this.settingData)

      const cachePushColumns = this.$deepClone(this.$parent.$parent.defaultPushColumns)
      this.$parent.$parent.pushColumns = [] // 先清空 （强制重新渲染表格）
      getPagePushSettings({ moduleName: this.settingData.pageId }).then(res => {
        // 如果有推送配置
        if (res.data) {
          const pushColumns = JSON.parse(res.data.screenJsonStr)
          cachePushColumns.map((item) => {
            for (const key in pushColumns) {
              if (item.prop == key) {
                item.defaultValue = pushColumns[key]
              }
            }
          })
          console.log(cachePushColumns, 'cachePushColumns')
          this.cancelFlag = res.data.cancelFlag
          this.moduleId = res.data.id
          this.powerJobTaskId = res.data.powerJobTaskId
          this.$parent.$parent.pushColumns = JSON.parse(JSON.stringify(cachePushColumns))
          console.log(this.$parent.$parent.pushColumns)
        } else {
          // 没有就使用默认
          this.$parent.$parent.pushColumns = cachePushColumns
        }
        // 选择器赋值
        this.$nextTick(() => {
          this.$parent.$parent.pushColumns.forEach(item => {
            if (item.type === 'select' || item.type === 'dict' || item.type === 'select-multiple') {
              item.options = this.$parent.$parent[item.optionsName]
            }
            if (item.type === 'time-select') {
              item.options = [{ value: '昨天', label: '昨天' },
                { value: '上周', label: '上周' },
                { value: '上个月', label: '上个月' }]
            }
            if (item.type === 'pushUser-select') {
              item.options = this.pushUserList
            }
          })
          console.log(this.$parent.$parent.pushColumns, 'this.$parent.$parent.pushColumns')
        })
        this.$nextTick(() => {
          const pushColumnsCache = JSON.parse(JSON.stringify(this.$parent.$parent.pushColumns)) // 解决传值过来无法修改值的bug
          console.log(pushColumnsCache, 'pushColumnsCache')
          pushColumnsCache.forEach(item => {
            if (!item.defaultValue) {
              item.defaultValue = undefined
            }
          })
          this.$set(this.settingDatas, 'PushColumns', pushColumnsCache)
          // this.newData2 = []
          this.newData2 = pushColumnsCache
          console.log(pushColumnsCache, '1')
          console.log(JSON.parse(JSON.stringify(pushColumnsCache)))
          console.log(this.newData2)
          this.loading = false
          // 获取页面的pageData，根据pageData的字段来修改默认值
          // this.newData2.forEach(ele => {
          //   if (ele.prop in this.$parent.$parent.pageData) {
          //     ele.defaultValue = this.$parent.$parent.pageData[ele.prop]
          //   }
          // })
          this.pageDatas = JSON.parse(JSON.stringify(this.settingData.pageData))
        })
      })
    },
    changeState() {
    },
    // 开启显示设置所有开关
    openAllDisplaySwitch() {
      this.newData.forEach((ele) => {
        ele.isShow = true
      })
    },
    // 关闭显示设置所有开关
    closeAllDisplaySwitch() {
      this.newData.forEach((ele) => {
        ele.isShow = false
      })
    },
    // 开启显示设置所有开关
    openAllFieldSwitch() {
      this.newData2.forEach((ele) => {
        ele.isShow = true
      })
    },
    // 关闭显示设置所有开关
    closeAllFieldSwitch() {
      this.newData2.forEach((ele) => {
        ele.isShow = false
      })
    },
    cancel() {
      this.$layer.close(this.layerid) // 关闭弹框
    },
    onSubmit() {
      // // 必填校验
      if (this.newData2.filter(item => {
        if (item.prop == 'pushCycle' && !item.defaultValue) {
          return item
        }
      }).length > 0) {
        return this.$message.warning('推送周期不能为空')
      } else if (this.newData2.filter(item => {
        if (item.prop == 'sendUsers' && (!item.defaultValue || item.defaultValue.length == 0)) {
          return item
        }
      }).length > 0) {
        return this.$message.warning('推送对象不能为空')
      } else {
        this.onSubmit2()
      }
    },
    // 提交
    onSubmit2() {
      const submitData = {}
      this.settingDatas.PushColumns = this.$deepClone(this.newData2)
      this.settingDatas.PushColumns.map((item) => {
        if (item.prop === 'pushCycle') {
          submitData.pushCycle = item.defaultValue
        }
        if (item.prop === 'sendUsers') {
          if (item.defaultValue) {
            submitData.sendUsers = item.defaultValue.toString()
          } else {
            submitData.sendUsers = undefined
          }
        }
      })
      const arr = this.newData2.map(item => {
        return {
          [item.prop]: item.defaultValue
        }
      })
      const result = Object.assign({}, ...arr)
      submitData.screenJsonStr = JSON.stringify(result)

      this.settingDatas.pageData = this.pageDatas
      submitData.moduleName = this.settingData.pageId
      submitData.id = this.moduleId
      submitData.companyName = this.companyName
      submitData.powerJobTaskId = this.powerJobTaskId
      submitData.cancelFlag = this.cancelFlag
      // console.log(this.$$$parent);
      submitData.prompt = `以下是为您推送的${this.settingData.pageId}，点击附件可查看详情！`
      savePagePushSettings(submitData).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        // this.$layer.close(this.layerid) // 关闭弹框
        // this.$parent.getPageSettings() // 调用父组件的方法
        location.reload() // 直接刷新页面吧
      })
    },
    backDefault() {
      backDefault({ userId: this.settingData.userId, pageId: this.settingData.pageId }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        // this.$layer.close(this.layerid) // 关闭弹框
        // this.$parent.getPageSettings() // 调用父组件的方法

        location.reload() // 直接刷新页面吧
      })
    },
    sliderChange(val, index) {
      if (val !== 0 && val < 100) {
        this.newData[index].width = 100
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-select__tags{
   max-width: 142.5px !important;
}
/deep/ .el-input-number.is-controls-right span {
  display: inline-block;
  height: 15px;
  width: 24px;
  line-height: 15px;
}
/deep/ .el-input-number .el-input {
  margin-top: -2px;
}
/deep/ .el-input--medium .el-input__inner {
  height: 30px !important;
  line-height: 30px;
  padding-left: 10px;
}
/deep/ .el-input-number--medium{
  line-height: 35px;
}
.changeStylePage{
  overflow-y: auto;
  flex: 1;
}

.changeStylePage /deep/ .el-input-number.is-controls-right .el-input__inner{
  padding-right: 34px;
  width: 120px;
}
.changeStyleSearch{
  overflow-y: auto;
  height: 100%;
}
.changeStyleSearch /deep/ .el-input {
    width: 360px;
}
/deep/ .svg-icon {
  height: 20px;
  width: 22px;
}
/deep/ .el-form-item__label {
  font-size: 14px !important;

  font-weight: 400;
  color: #666666;
  width: 180px;
}
.num{
.el-input,.el-select, .el-date-editor.el-input{
  width: 360px !important;
}
/deep/ .el-input__suffix{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

}
.changeStylePage /deep/ .el-input{
  width: 220px;
 }
.container {
  width: 100%;
  overflow: hidden;
  .setting {
    //height: 650px;
    width: 100%;
    padding: 25px 20px 0 20px;
    //overflow-y: auto;
    height: 100%;
    display: flex;flex-direction: column;
    .tips {
      margin-bottom: 21px;
      font-size: 14px;

      font-weight: 400;
      color: #666666;
    }
    .tableRow {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      &:nth-child(even) {
        background: #F7FAFF;
      }
      &:nth-child(odd) {
        background: #EBF2FF;
      }
      &:nth-child(-n+4) {
        background-color: #ffffff;
        .table-left{
          border-right:none ;
        }
      }
      &:nth-child(4) {
        .table-left{
          margin-top: 10px;
          .name{
            font-weight: 500;
            font-size: 18px;
          }
        }
      }
                  &:nth-child(-n+2)::before {
              content: "*";
              color: #ff4949;
              margin-right: -8px;
            }

      .table-left {
        height: 40px;
        width: 610px;
        // padding-bottom: 20px;
        margin: 5px 0;
        border-right: 1px solid #efefef;
        // margin-right: 1px;
        // padding: 5px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .switch {
          margin: 0 24px;
        }
        .switch_box{
          text-align: right;
          width: 380px;
          margin:0 20px 5px;
        }
        .name {
          text-align: center;
          font-size: 14px;
          margin-left: 15px;
          font-weight: 400;
          color: #333333;
        }
        .num {
          width: 380px;
          font-size: 14px;
          display: flex;
          .num_setting{
            padding-right: 20px;
            color: #387bfc;
          }
          .num_show{
            color: #c0c4cc;
          }
        }
      }
      //   .line{
      //       height: 40px;
      //       width: 1px;
      //   }
      .table-right {
        height: 40px;
        width: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .bottomBtn {
    padding: 20px;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .left-button {
      font-size: 14px;

      font-weight: 400;
      color: #666666;
      display: flex;
      flex-direction: row;
      align-items: center;
      div {
        cursor: pointer;
      }
      .openAll {
        margin-right: 20px;
      }
    }
  }
}
.el-tab-pane{
  justify-content: center;
}
.container /deep/ .el-input{
  padding-right: 0px;
}
.el-tabs{
  height: calc(100% - 70px);
}
.column_one{
  /deep/ .el-form-item{
    width: calc(100% - 40px);
    .el-form-item__label{
      width: 140px;
    }
  }
}
/deep/ .el-date-editor{
  height: 30px;
}
/deep/.el-tabs__content{
 height: calc(100% - 30px) !important;
}
</style>
